<template>
	<view>
		<view class="main" :style="componentStyle">
			<view class="main_left_largeType">
				<view class="list">
					<view 
						:class="choose==index?'on':''" 
						v-for="(item,index) in LargeTypeList" 
						:key="index"
						@click="chooseLargeType(item,index)"
						class="main_left_largeType_item">
							<u-image width="40rpx" height="40rpx" :src="item.icon" shape="circle"></u-image>
							<text class="main_left_largeType_item_name u-p-t-10">{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="main_left_smallType">
				<scroll-view class="list" :scroll-y="true" :style="{height: scrollHeight + 'px'}">
					<view 
						v-for="(item, index) in lowerTypeList" 
						:key="item.id" 
						@click="chooseLargeType(item)"
						class="main_left_smallType_item u-p-t-20 u-p-b-20">
							<view class="u-m-b-10">
								<text class="main_left_smallType_item_name">{{item.name}}</text>
							</view>
							<u-icon name="arrow-down" class="tips-txt"></u-icon>
					</view>
					<view 
						v-for="(item,index) in ProductList" 
						:key="index" 
						class="main_left_smallType_item u-p-t-20 u-p-b-20"
						:class="{'on':item.on}" 
						@click="addLowerLevel(item)">
						<text class="main_left_smallType_item_name">{{item.name}}</text>
						<text class="u-m-t-10 price">{{item.price}}元/KG</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commonStore
	} from "@/store/common.js"
	// 引入配置
	import config from '@/util/config.js'
	
	export default {
		setup() {
			const common = commonStore()
		
			return {
				common
			}
		},
		props: {
			orderId: 0,
			defaultChoose: {
				type: Array,
				default: function(){
					return []
				}
			},
			componentStyle: {
				type: Object,
				required: false,
				default: function(){
					return {
						width: '230rpx',
						flex: 1
					}
				}
			}
		},
		data() {
			return {
				LargeTypeList: [], //一级目录列表
				lowerTypeList: [], //下级目录列表
				typeObj: {}, //选择的品类
				ProductList: [], //产品列表
				chooseType: [], //已选择的下级分类
				smallTypeId: 0,
				choose: 0,
				disabled: false,
				scrollHeight: 0,
			}
		},
		mounted() {
			console.log('初始化组件goods-vertical-box')
			this.scrollHeight = uni.getSystemInfoSync().screenHeight - uni.upx2px(250)
			if(this.defaultChoose.length > 0){
				console.log('this.defaultChoose',this.defaultChoose)
				this.chooseType = JSON.parse(JSON.stringify(this.defaultChoose))
			}
			this.init()
		},
		computed: {
			goodsList(){
				return this.common.goodsList
			}
		},
		watch:{
			goodsList(data){
				console.log('在goods-vertical-box组件监听到变化',data)
				this.chooseType = data
				this.ProductList.forEach((item, i) => {
					if(this.chooseType.find(cell=>cell.id == item.id)){
						this.ProductList[i].on = this.chooseType.find(cell=>cell.id == item.id).on
					}else{
						this.ProductList[i].on = false
					}
				})
			}
			// details(value, oldvalue) {
			// 	console.log('监听details', value, oldvalue)
			// 	// #ifndef H5
			// 	this.confirmForm.details = []
			// 	this.chooseType = value

			// 	this.ProductList.forEach((item, i) => {
			// 		// 对比已选择下级分类
			// 		if (this.chooseType.find(cell => cell.id == item.id)) {
			// 			this.ProductList[i].on = this.chooseType.find(cell => cell.id == item.id).on
			// 		} else {
			// 			this.ProductList[i].on = false
			// 		}
			// 	})
				
			// 	this.chooseType.forEach((item) => {
			// 		this.confirmForm.details.push(item)
			// 	})
			// 	this.confirmForm.total = 0
			// 	this.confirmForm.details.forEach((item, index) => {
			// 		this.confirmForm.total += item.weight * item.price
			// 	})
			// 	// #endif
			// }
		},
		methods: {
			init() {
				this.getTypeList(0).then((datas)=>{
					if(datas.length > 0){
						this.chooseLargeType(datas[0], 0)
					}
				})
			},
			//获取大类
			getTypeList(pid) {
				return new Promise((resolve,reject)=>{
					uni.$u.http.get('/Pack/WasteType/List?pid='+pid+'&dataPERType=1').then((res) => {
						if(pid == 0){
							this.LargeTypeList = res.datas.filter((item)=>item.usestate == '已启用')
							this.LargeTypeList.forEach((item) => {
								item.icon = this.fileURL + item.icon
							})
						}else{
							this.lowerTypeList = res.datas.filter((item)=>item.usestate == '已启用')
							this.lowerTypeList.forEach((item) => {
								item.icon = this.fileURL + item.icon
							})
						}
						resolve(res.datas)
					}).catch(() => {
						// this.loading = false
					})
				})
				
			},
			// 获取品名
			getProductList(typeId){
				uni.$u.http.get(`/Pack/Product/List?typeId=${typeId}&dataPERType=1`).then((res)=>{
					// this.$nextTick(()=>{
						this.ProductList = res.datas.filter(item => item.usestate === '已启用')
					// })
					console.log('获取品名',this.ProductList)
					// this.ProductList.forEach((item, i) => {
					// 	// 对比已选择下级分类
					// 	if (this.chooseType.find(cell => cell.id == item.id)) {
					// 		this.ProductList[i].on = this.chooseType.find(cell => cell.id == item.id).on
					// 	} else {
					// 		this.ProductList[i].on = false
					// 	}
					// })
				})
			},
			// 选择左侧第一级目录
			chooseLargeType(item,index){
				if(index >= 0){
					this.choose = index
				}
				this.typeObj = item
				this.getProductList(item.id)
				this.getTypeList(item.id)
			},
			// 选中下级分类
			addLowerLevel(item){
				if(!item.on){
					// 清除上次取消的重量（数量）
					item.weight = 0
					this.chooseType.push(item)
				}else{
					this.chooseType = this.chooseType.filter((cell)=>cell.id != item.id)
					// this.common.goodsList = this.common.goodsList.filter((cell)=>cell.id != item.id)
				}
				item.on = !item.on
				// console.log('goodsList',this.goodsList)
				// console.log('chooseType',this.chooseType)
				this.$emit('confirm', this.chooseType)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex: 1;
	
		&_left {
			width: 220rpx;
			display: flex;
			flex-direction: column;
			// border-right: 1px solid $uni-light-color;
			// flex: 1;
	
			&_head {
				display: flex;
				flex-direction: row;
				padding: 20rpx;
				
				line-height: 1.4em;
				height: 80rpx;
				box-sizing: border-box;
			}
	
			&_content {
				display: flex;
				flex-direction: row;
				flex: 1;
			}
	
			&_largeType {
				padding: 10rpx;
				background: #fff;
	
				&_item {
					// background-color: $uni-light-color;
					width: 80rpx;
					// height: 120rpx;
					padding: 10rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 10rpx;
					justify-content: center;
					border-radius: 10rpx;
	
					&_name {
						// color: $uni-light-color;
						color: $uni-color-main;
						font-size: 16rpx;
						text-align: center;
					}
					
					&.on{
						background-color: #f4f4f5;
					}
				}
			}
	
			&_smallType {
				flex: 1;
				background-color: #f4f4f5;
				padding: 10rpx;
	
				&_item {
					background-color: #ffffff;
					width: 100%;
					height: 100rpx;
					padding: 16rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 10rpx;
					justify-content: center;
					border-radius: 10rpx;
	
					&_name {
						// font-size: 18rpx;
						// color: $uni-light-color;
						font-size: 16rpx;
						padding: 0 4rpx;
						text-align: center;
					}
					
					&.on{
						background-color: $uni-color-main;
						color: #fff;
						.price{
							color: #fff;
						}
					}
				}
	
				.price {
					font-size: 14rpx;
					color: $uni-color-grey;
				}
			}
		}
	}
</style>